<template>
  <div>
    <!-- 顶部栏目 表单查询条 -->
    <div class="d-flex align-items-center">

      <!-- 左边 -->
      <slot name="left"></slot>
      
      <!-- 右边 -->
      <div class="ml-auto" v-show="!superSearch">

        <slot name="right">
          <!-- 默认值 -->
          <el-input 
            class="mr-2"
            v-model="keyword" 
            :placeholder="placeholder" 
            size="small" 
            style="width: 180px;"></el-input>
          <el-button type="info" size="small" @click="$emit('search', keyword)">搜索</el-button>
          <el-button size="small" @click="superSearch = true">高级搜索</el-button>
        </slot>

      </div>
    </div>
    <el-card class="box-card bg-light my-3" v-show="superSearch">
      <div slot="header" class="clearfix" style="margin: -10px;">
        <span>高级搜索</span>
        <el-button 
          @click="closeSuperSearch" 
          style="float: right; padding: 3px 0" 
          type="text">收起</el-button>
      </div>

      <slot name="form"></slot>

    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      keyword: '',
      superSearch: false
    }
  },
  methods: {
    closeSuperSearch(){
      this.superSearch = false
    }
  }
}
</script>

<style scoped>

</style>